import type { HomeType } from '../../interface'
import { useLayoutEffect } from 'react'
import { getOptions } from './config'
import { Plate } from '../Plate'
import { isEmpty, rpxToPx } from '@/utils/share'
import styles from './index.module.less'
import classNames from 'classnames'
import * as echarts from 'echarts'

interface Props {
    className?: string
    /** 数据 */
    data: HomeType.CheckData
}

/** 结果占比 */
const ResultProportion = (props: Props) => {
    const { data } = props

    // const store = useLocalObservable(() => ({
    //     /** 当前年份 */
    //     currentYarn: props.defaultSelectedYarn ?? null,
    // }))

    useLayoutEffect(() => {
        const chartDom = document.getElementById('resultProportion')
        if (!chartDom) return

        const myChart = echarts.init(chartDom)

        const options = getOptions(data)
        myChart.setOption(options)
    }, [data])

    const Title = (
        <>
            <div>结果占比</div>
        </>
    )

    return (
        <Plate
            className={`${styles.resultProportion} ${props.className}`}
            headerClass={classNames(styles.resultProportion_plate_header)}
            contentClass={classNames(styles.resultProportion_plate_content)}
            title={Title}
            showEmpty={isEmpty(data)}
        >
            <div id="resultProportion" style={{ height: rpxToPx(520, { base: 750 }) }} />
        </Plate>
    )
}

export default ResultProportion
